<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="http://screen-review.blogspot.com/favicon.ico" />
<meta charset=utf-8 />
<title>Screen Review</title>

<style>
 body{width:980;background:#fff;padding-left:220px;background-image:url(http://4.bp.blogspot.com/_dZM2bJJMfBs/TQf9nd3kvKI/AAAAAAAAA5Q/v69RM9l38pU/s000/bodi.png);}
 h1{font-weight:bold;font-family:comic sans ms;font-size:20px;text-align:center;}
 #garis{border:2px double #000}
 .post {border:1px solid #fff;background:#efefef;padding:5px;width:905px;border-radius:5px;color:#555555;box-shadow: 1px 1px 1px #5A5F68;}
 /**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 12px !important;
  min-height: inherit !important;
  min-height: auto !important;
}

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}
.syntaxhighlighter.source {
  overflow: hidden !important;
}
.syntaxhighlighter .bold {
  font-weight: bold !important;
}
.syntaxhighlighter .italic {
  font-style: italic !important;
}
.syntaxhighlighter .line {
  white-space: pre !important;
}
.syntaxhighlighter table {
  width: 100% !important;
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .container {
  position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {
  padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important;
}
.syntaxhighlighter.show {
  display: block !important;
}
.syntaxhighlighter.collapsed table {
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
  padding: 0.1em 0.8em 0em 0.8em !important;
  font-size: 1em !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
  display: inline !important;
  margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0 !important;
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline !important;
}
.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
  display: inline !important;
}
.syntaxhighlighter .toolbar a {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
  display: none !important;
}
.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important;
}
.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
  color: black !important;
}
.syntaxhighlighter.printing .toolbar {
  display: none !important;
}
.syntaxhighlighter.printing a {
  text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: blue !important;
}
.syntaxhighlighter.printing .keyword {
  color: #006699 !important;
  font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
  color: gray !important;
}
.syntaxhighlighter.printing .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
  color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
  color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
  font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important;
}

</style>
<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>
jQuery(document).ready(function($) {
 
	$(&quot;.scroll&quot;).click(function(event){		
		event.preventDefault();
		$(&#39;html,body&#39;).animate({scrollTop:$(this.hash).offset().top}, 500);
	});
});
</script>
</head>
<body>
<style>
#posi{border-top-right-radius:5px;border-bottom-right-radius:5px;position:fixed;top:20%;left:84.8%;background:#efefef;border:1px solid #fff;border-left:none;padding:8px;}
#posi li {list-style:none;padding:4px;}
#posi li a{    background: -moz-linear-gradient(center top , #F9F9F9 0%, #E8E8E8 100%) repeat scroll 0 0 transparent;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
    color: #717171;
    display: block;
    font: bold 11px Arial,sans-serif;
    padding: 5px 8px;
    text-decoration: none;
    text-shadow: 0 1px white;text-align:center;}
#posi li a:hover{box-shadow:0 1px 5px #4C4C4C inset, 0 1px 0 #9B9B9B}
</style>

<div id='posi'>
<li><a href="#1" class="scroll">Single Image</a></li>
<li><a href='afridho'>Download</a></li>
<li><a href='afridho'>Rating</a></li>
<li><a href='afridho'>Review</a></li>
<li><a href='afridho'>Screen</a></li>
</div>
<div class='post'>
<h1 id='1'>Single Image Lightbox</h1>
 <center> <img src='https://lh6.googleusercontent.com/-s37EbebQWSk/T7W2F_-ZpoI/AAAAAAAABHk/M3X12_ziGrk/s643/1.png'></center>
  <pre class="brush: html">
<a href="LINK_IMAGE" class="lightbox"><img src="LINK_IMAGE" /></a>
<a href="LINK_IMAGE" title="KETERANGAN_IMAGE" class="lightbox"><img src="LINK_IMAGE" a/></a>
  </pre>
  <div id='garis'></div>
  <h1>Gallery Image Lightbox</h1>
<center> <img src='https://lh5.googleusercontent.com/-D1Xii-oh77U/T7W2HGTvz0I/AAAAAAAABH0/BAe2Pc5jzBU/s855/2.png'></center>
  <pre class="brush: html">
<a href="LINK_IMAGE" class="lightbox" rel="group1" title="KETERANGAN_IMAGE"><img src="LINK_IMAGE" /></a>
<a href="LINK_IMAGE" class="lightbox" rel="group1" title="KETERANGAN_IMAGE"><img src="LINK_IMAGE" /></a>
<a href="LINK_IMAGE" class="lightbox" rel="group1" title="KETERANGAN_IMAGE"><img src="LINK_IMAGE" /></a>
<a href="LINK_IMAGE" class="lightbox" rel="group1" title="KETERANGAN_IMAGE"><img src="LINK_IMAGE" /></a>
<a href="LINK_IMAGE" class="lightbox" rel="group1" title="KETERANGAN_IMAGE"><img src="LINK_IMAGE" /></a> 
 </pre>
 <div id='garis'></div>
 <h1>Tombol Download</h1>
 <center> <img src='https://lh3.googleusercontent.com/-inErxkPHW1Q/T7W2D7_-jmI/AAAAAAAABHc/-oYIWF0AGJU/s195/3.png'></center>
  <pre class="brush: html">
<div class="buttonWrap">
<div class="toggleButton">Download Now!</div>
<a class="toggleSection" href="LINK_PROGRAM">
Exe
7.27 MB
</a></div>
</pre>
<div id='garis'></div>
<h1>Spoiler</h1>
<center> <img src='https://lh6.googleusercontent.com/-_FyPlHFtxT0/T7W2GOKgieI/AAAAAAAABHo/CRTmjmCcKMs/s910/4.png'></center>
  <pre class="brush: html">
<blockquote class="spoiler">ISI_SPOILER</blockquote></pre>
<div id='garis'></div>
<h1>Spoiler CSS</h1>
<center> <div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-jVTzWSyIX_Y/T7W2HHkM5OI/AAAAAAAABHw/-X9BIrghmpo/s916/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="38" src="http://2.bp.blogspot.com/-jVTzWSyIX_Y/T7W2HHkM5OI/AAAAAAAABHw/-X9BIrghmpo/s640/5.png" width="640" /></a></div>

</center>
  <pre class="brush: html">
<blockquote class="collapsed">ISI_SPOILER</blockquote></pre>
<div id='garis'></div>
<h1>Colour Tooltips</h1>
<center> <img src='https://lh4.googleusercontent.com/-gVw3Umotnp0/T8JKYpsvl8I/AAAAAAAABMQ/4D2ChtnDh18/s430/1.jpg'></center>
  <pre class="brush: html">
<a href="#" class="blue" title="ISI_TOOLTIP">KATA_KATA</a>
<a href="#" class="green" title="ISI_TOOLTIP">KATA_KATA</a>
<a href="#" class="black" title="ISI_TOOLTIP">KATA_KATA</a>
<a href="#" class="white" title="ISI_TOOLTIP">KATA_KATA</a>
<a href="#" class="red" title="ISI_TOOLTIP">KATA_KATA</a>
</pre>
<div id='garis'></div>
<h1>Tombol Putih</h1>
<center> <img src='https://lh5.googleusercontent.com/-Pbcjfd2doBg/T8JKYxZfGUI/AAAAAAAABMU/fJmG74zBSIQ/s564/3.jpg'></center>
  <pre class="brush: html">
<ul id="pagin">
<li><a href="#">1</a></li>
<li><a href="#">apa adanya</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">next</a></li>
</ul>
</pre>
<div id='garis'></div>
<h1>Tabel Biru</h1>
<center> <img src='https://lh4.googleusercontent.com/-4DRHAaY5Xpk/T8JKYkwbeNI/AAAAAAAABMM/yArU17r1KjQ/s342/2.jpg'></center>
  <pre class="brush: html">
<table class="bordered"><thead>
<tr>         <th>#</th>                 <th>IMDB Top 10 Movies</th>         <th>Year</th>     </tr>
</thead> <tbody>
<tr>          <td>1</td>                 <td>The Shawshank Redemption</td>          <td>1994</td>     </tr>
<tr>         <td>2</td>                  <td>The Godfather</td>          <td>1972</td>     </tr>
<tr>          <td>3</td>                  <td>The Godfather: Part II</td>         <td>1974</td>     </tr>
<tr>          <td>4</td>          <td>The Good, the Bad and the Ugly</td>         <td>1966</td>      </tr>
<tr>         <td>5</td>          <td>Pulp Fiction</td>          <td>1994</td>     </tr>
</tbody></table>

</pre>
<div id='garis'></div>
<h1>Lightbox HTML</h1>
<center> <img src='https://lh3.googleusercontent.com/-v0203CDdW5g/T8JQKbkvzOI/AAAAAAAABMw/4AISAOUYx3Y/s428/4.jpg'></center>
  <pre class="brush: html">
<div style='none'><div id='ID_UNIK'>BLABALALALALABALABALABALA</div></div> 
<a href="?lightbox[width]=524&lightbox[height]=178#ID_UNIK" class="lightbox">BUKA_LIGHTBOX</a>
</pre>
<div id='garis'></div>
<h1>Tooltip CSS</h1>
<center> <img src='https://lh5.googleusercontent.com/-l5eEFddK0mQ/T8JQK6_TKrI/AAAAAAAABM0/9jrq1_NwzbI/s634/5.jpg'></center>
  <pre class="brush: html">
<a href="#" class="tooltip yellow-tooltip">velit<span><b>Optional title</b>
This is a yellow CSS3 tooltip.</span></a>
<a href="#" class="tooltip navy-tooltip">accumsan<span><b>Optional title</b>
This is a navy CSS3 tooltip.</span></a>
<a href="#" class="tooltip blue-tooltip">justo<span><b>Optional title</b>
This is a blue CSS3 tooltip.</span></a>
<a href="#" class="tooltip pink-tooltip">velit<span><b>Optional title</b>
This is a pink CSS3 tooltip.</span></a>
</pre>
<div id='garis'></div>
<h1>Tabel Modern</h1>
<center> <img src='https://lh5.googleusercontent.com/-2mB5-N2XI9Y/T8JQLP1SRtI/AAAAAAAABM4/IdplgeLNnRw/s674/6.jpg'></center>
  <pre class="brush: html">
<table cellspacing="0" class="b5"><tbody>
<tr><th>Task Details</th><th>Progress</th><th>Vital Task</th></tr>
<tr><td>Look at Orman's <a href="http://www.premiumpixels.com/simple-little-table-psd/">simple table design</a></td><td>100%</td><td>No</td></tr>
<tr><td>Turn table design into a web project</td><td>100%</td><td>Yes</td></tr>
<tr><td>Drink another cup of coffee</td><td>50%</td><td>Yes</td></tr>
<tr><td>Take a stretch break</td><td>0%</td><td>Yes</td></tr>
<tr><td>Post this stuff on the interweb</td><td>100%</td><td>Yes</td></tr>
</tbody></table>
</pre>
<div id='garis'></div>
<h1>Caption Image</h1>
<center> <img src='https://lh5.googleusercontent.com/-uBzuz9J9z0Q/T8PEB72ykbI/AAAAAAAABNk/lyZ2nKtvOnU/s440/33.jpg'></center>
  <pre class="brush: html">
<img class='gambar' src='http://2.bp.blogspot.com/-c3roNVvAUds/T8O7qVQfyjI/AAAAAAAABNQ/uEYB5xohc9c/s400/4.jpg' alt='JUDUL_GAMBAR'/>
</pre>
<div id='garis'></div>
<h1>Judul Pembatas</h1>
<center> <img src='https://lh4.googleusercontent.com/-5Ragzq9JBYk/T8PExKJc30I/AAAAAAAABN0/9_PjRmEOqQw/s662/22.jpg
'></center>
  <pre class="brush: html">
<div class='infocontent'>
<h1>JUDUL_H1</h1>
</div>
</pre>
<div id='garis'></div>













</body>
</html>